<template>
  <div class="tip gap-col-8">
    <div class="gap-col-5 mb-0">
      <div class="font-size-12 font-style-normal font-weight-400 line-height-140">{{ $t('label.donateAmount') }}</div>
      <div class="tag-container gap-row-4 gap-col-4">
        <Tag
          v-for="amount in amountList"
          :key="`amount-${amount}`"
          :label="amount"
          :value="amount"
          :selected="selectedAmount === amount"
          dark
          @click="toggleSelectedAmount"
        ></Tag>
      </div>
    </div>
    <InputWrap
      v-model="fee.value"
      :err-msg="fee.error"
      :bgDark="true"
      :placeholder="$t('info.donate')"
      prepend-text="$"
      @blur="fee.error = ''"
      @update:modelValue="onAmountInput"
    ></InputWrap>
    <div v-if="errMsg" class="text-end font-size-12 font-weight-400 line-height-120 text-primary-x">{{ errMsg }}</div>
    <TextareaWrap
      v-model="msg.value"
      :label="$t('label.optionalMsg')"
      :err-msg="msg.error"
      :bgDark="true"
      :placeholder="$t('placeholder.donateMessage')"
    ></TextareaWrap>
    <div class="font-size-12 font-weight-400 text-graydisabled">
      {{ $t('info.maxMsg') }}
    </div>
  </div>
</template>

<script setup>
import { onDeactivated, reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { useYup, validateSync } from '@/plugins/yup'
import Tag from '@/components/common/Tag.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import TextareaWrap from '@/components/form/TextareaWrap.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { useWindow } from '@/compositions/utils/window'

const amountList = ['1.00', '2.00', '5.00', '10.00', '20.00', '50.00', '100.00', '200.00']
const selectedAmount = ref(null)

function toggleSelectedAmount(amount) {
  selectedAmount.value = selectedAmount.value === amount ? null : amount
  fee.value = ''
}
function onAmountInput() {
  selectedAmount.value = null
}

const fee = reactive({
  value: '',
  error: '',
  check: false,
})

const msg = reactive({
  value: '',
  error: '',
  check: false,
})

const errMsg = ref('')

const Yup = useYup()
const schemaFee = Yup.number().required().min(1).max(99999).typeError($t('yup.number.typeError'))
const schemaMsg = Yup.string().max(300)

const { openWindow } = useWindow()

const { content } = storeToRefs(usePopupDialogStore())

useConfirmData(validator)
function validator() {
  resetErrors()

  if (!selectedAmount.value && !fee.value) {
    errMsg.value = $t('error.number.chooseOrInputOne')
    return false
  }

  if (fee.value) validateSync(schemaFee, fee)
  if (fee.value && !fee.check) return false

  validateSync(schemaMsg, msg)
  if (!msg.check) return false

  const result = {
    amount: Number(fee.value ? fee.value : selectedAmount.value),
    message: msg.value,
  }

  if (content.value.multiPay) {
    reset()
    return result
  }

  const newWindow = openWindow()
  reset()
  return { ...result, newWindow }
}

onDeactivated(() => reset)

function reset() {
  fee.value = ''
  fee.check = false
  fee.error = ''

  msg.value = ''
  msg.check = false
  msg.error = ''

  selectedAmount.value = null
  errMsg.value = ''
}

function resetErrors() {
  fee.error = ''
  msg.error = ''
  errMsg.value = ''
}
</script>

<style lang="scss" scoped>
.tip {
  display: flex;
  flex-direction: column;

  .input {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;

    input {
      width: 100%;
      outline: none;
    }
  }
}

.tag-container {
  width: 100%;
  height: 100%;
}
</style>
